<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
import { getnetShop ,getmulu} from "../assets/api/home";
import { useRoute } from "vue-router";
export default {
  setup() {
    let index = ref(0);
    let route = useRoute();
    console.log(route);
    const value = ref(3);
    let obj = reactive({
      netshop: [],
      muluData:[],
      img: "",
    });

    //修改样式
    let toindex = ref(0);
    let change = (item) => {
      // console.log(item);
      toindex.value = item;
    };

    let getnetShopFun = () => {
      getnetShop(route.query.key).then((data) => {
        obj.netshop = data.data.results.body;
        obj.img = data.data.results.body.details;
      });
      getmulu(route.query.key).then(res=>{
        obj.muluData = res.data.results.body.resouceList
        console.log(obj.muluData);
      })
    };
    getnetShopFun();
    

    return {
      ...toRefs(obj),
      index,
      change,
      toindex,
      value
    };
  },
};
</script>


<template>
  <div class="container">
    <header>
      <div class="left">
        <span @click="$router.go(-1)">
          <i></i>
        </span>
        <h6>{{ netshop.title }}</h6>
        <span>
          <i></i>
        </span>
      </div>
    </header>

    <!-- 展示 -->
    <div class="count">
      <!-- 广告 -->
      <div class="main">
        <div class="img">
          <img :src="netshop.coverTopImg" class="auto-img" alt="" />
        </div>
      </div>

      <!-- 标题 -->

      <h3>{{ netshop.title }}</h3>

      <div class="text">
        <h6>{{ netshop.liveTime }} 开课</h6>
        <i></i>
        <span>{{ netshop.period }}课时</span>
      </div>

      <div class="choose">
        <!-- 循环的选课内容 -->
        <div
          :class="['items', index == toindex ? 'icons' : '']"
          v-for="(item, index) in netshop.composeList"
          :key="index"
          @click="change(index)"
        >
          <h6>{{ item.title }}</h6>
        </div>
      </div>
    </div>

    <div class="title">
      <div :class="index == 0 ? 'items' : ''" @click="index = 0">课程介绍</div>
      <div :class="index == 1 ? 'items' : ''" @click="index = 1">目录</div>
      <div :class="index == 2 ? 'items' : ''" @click="index = 2">教师介绍</div>
      <div :class="index == 3 ? 'items' : ''" @click="index = 3">评论</div>
    </div>

    <!-- 商品介绍 -->
    <div class="main2" v-if="index == 0" v-html="img"></div>
    <div class="main2" v-if="index == 1">
      <div class="director">
        <div class="box" v-for="(item,index) in muluData" :key="index">
          <div class="left">{{item.sort}}</div>
          <div class="right">
            <h5>{{item.name}}</h5>
            <h6>{{item.teacher}}<span>{{item.liveTime}}</span><span>开课</span></h6>
          </div>
        </div>
      </div>
    </div>
    <div class="main2" v-if="index == 2">
      <div class="teachersay1">
        <!-- 要循环的 -->
        <div class="teachersay">
          <div class="left">
            <img src="../assets/img/head.jpg" alt="" />
          </div>

          <div class="right">
            <h6>邵雯</h6>
            <p>
              12年英语类考试培训经验，对教学法和测试学研究深入
              打造多门经典课程，学员数以百万
              创立听力“天聋八步”“倍速听力”“精听大法”等解题秘籍
              独创Point-Line-Plane-Space阅读法和“逐字稿检测式”笔记法
              知名教育博主，全网粉丝超400万
              21世纪英文报专栏作者，中国教育在线、新浪等媒体考试点评嘉宾
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="main2" v-if="index == 3">
     <div class="comments">
      <div class="left">全部评论(0)条</div>

      <div class="right">
        好评度
        <van-rate
          v-model="value"
          :size="10"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </div>
    </div>
    </div>

    
    <div class="listener">
      <i></i>
      客服
    </div>

    <footer>
      <div class="left">
        <h5>¥99</h5>
        <h6>已购134</h6>
      </div>

      <div class="right">立即购买</div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
@import "../assets/css/base.css";
@import url("../assets/css/swiper.min.css");
::v-deep .van-swipe__indicators {
  display: none;
}

header {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
  background-color: #fff;
  z-index: 100;
}
header .left {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  h6 {
    // margin-left: 50px;
    font-size: 15px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}
header .left span:nth-child(1) i {
  display: block;
  background-image: url(../assets/img/下载.png);
  width: 48px;
  height: 46px;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: 20px 13px;
}
header .left span:nth-child(3) i {
  display: block;
  // background-image: url(../assets/img/下载.png);
  width: 48px;
  height: 46px;
  // background-size: 18px 18px;
  // background-repeat: no-repeat;
  // background-position: 20px 13px;
}

// 展示
.count {
  display: flex;
  flex-direction: column;
}

.main {
  position: relative;
}

.main img {
  width: 100%;
}

h3 {
  height: 38px;
  line-height: 38px;
  font-weight: bolder;
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

.count .text {
  display: flex;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  align-items: center;
}

.count .text h6 {
  color: #1d1b20;
}

.count .text i {
  display: block;
  width: 2px;
  height: 12px;
  background-color: #efefef;
  margin: 0 15px;
}

.count .text span {
  font-size: 12px;
  color: #1d1b20;
}

.choose {
  display: flex;
  margin-top: 10px;
  box-shadow: 0px 2px 3px #f5f6f9;
  // width: 100%;
  overflow: hidden;
  flex-wrap: wrap;
  padding: 0px 15px;
}

.choose .items {
  background-color: #f3f7fa;
  height: 35px;
  line-height: 35px;
  padding: 0 16px;
  margin-bottom: 15px;
  margin-right: 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  // width: 20%;
}

.choose .items h6 {
  font-size: 13px;
  color: #919191;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.choose > .icons {
  border: 1px solid #3c92ff;
  color: #3c92ff;
  background-color: #e7f4ff;
  h6 {
    color: #3c92ff;
  }
}

.count .small {
  display: flex;
  height: 44px;
  align-items: center;
  padding-left: 15px;
  box-shadow: 0px 0px 10px #dbdbdb;
}

.count .small i {
  display: block;
  width: 17px;
  height: 15px;
  // background-image: url(../assets/img/base3/money.png);
  background-size: 17px 15px;
}

.count .small > h6 {
  margin-left: 5px;
  font-size: 13px;
}

.count .small .red {
  border-radius: 3px;
  margin-left: 10px;
  flex: 1;
}

.count .small .red h6 {
  background-color: #fff0ed;
  color: #ff3f00;
  height: 20px;
  line-height: 20px;
  width: 75px;
  text-align: center;
}

.count .small span {
  display: block;
  // background-image: url(../assets/img/base3/circle.png);
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  padding-right: 15px;
}

// 目录标题
.title {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0px 15px;
  height: 50px;
}

.title div {
  flex: 1;
  font-weight: bolder;
  text-align: center;
  font-size: 14px;
  color: #c4cbde;
  border-right: 1px solid #ededed;
}
.title div:nth-last-child(1){
    border-right: 1px solid transparent;
}

.title div.items {
  color: #3378df;
}

.main2 {
  margin-top: 18px;
  padding: 0px 15px;
}

.main2 img {
  width: 100%;
  margin-top: -4px;
}

footer {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  background-color: #fff;
  display: flex;
  padding: 0px 15px;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 12px;
  box-shadow: 0px -2px 8px #e0e0e0;
}

footer .left {
  display: flex;
  flex-direction: column;
}

footer .left h5 {
  color: #ff6c44;
  font-size: 18px;
}

footer .left h6 {
  color: #8d9095;
}

footer .right {
  font-weight: bolder;
  width: 115px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 22px;
  font-size: 15px;
  color: #f8ffff;
  background-image: linear-gradient(to right, #fa6900, #ee0b04);
}

.listener {
  position: fixed;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  z-index: 110;
  right: 6px;
  bottom: 80px;
  background-color: #fff;
  border: 1px solid #f7f4ff;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  justify-content: center;
  align-items: center;
}

.listener i {
  display: block;
  background-image: url(../assets/img/ic_chat.f46e924.png);
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
}

.director {
  margin-top: 18px;
  padding: 0 15px 60px 0;

}
.director .box {
  display: flex;
}
.director .box .left {
  color: #c4cbde;
  margin-right: 5px;
  padding-top: 3px;
}
.director .box .right {
  flex: 1;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 16px;
}
.director .box .right h5 {
  height: 25px;
  line-height: 25px;
  color: #2b2024;
  font-size: 16px;
}
.director .box .right h6 {
  height: 24px;
  line-height: 24px;
  color: #b0b2b6;
}
.director .box .right h6 span:nth-child(1) {
  margin-left: 4px;
}
.director .box .right h6 span:nth-child(2) {
  margin-left: 4px;
}
.teachersay1{
    padding-bottom: 100px;
}
.teachersay {
  display: flex;
  padding: 0px 15px;
  border-bottom: 1px solid #f0f0f0;
}
.teachersay .left {
  margin-top: 10px;
  margin-right: 24px;
}
.teachersay .left img {
  width: 37px;
  height: 37px;
  border-radius: 50%;
}
.teachersay .right h6 {
  margin: 0px;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
}
.teachersay .right p {
  margin-top: 17px;
  color: #192019;
  padding-bottom: 30px;
}
.comments {
  padding: 0px 15px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 100px;
}
.comments .left {
  font-size: 12px;
  color: #000000;
  height: 46px;
  line-height: 46px;
}
.comments .right {
  font-size: 12px;
  height: 46px;
  line-height: 46px;
}
</style>